<template>
  <view class="content">
    <uni-nav-bar
      title="商城分类"
      color="#fff"
      backgroundColor="transparent"
      :border="false"
      :statusBar="true"
      :fixed="true"
      @clickLeft="$c.back()"
    >
      <view class="uni-nav-bar-l-icon" slot="left">
        <view class="uni-nav-bar-l-icon-left icon">
          <image :src="$img('/static/img2/cc20.png')" lazy-load></image>
        </view>
      </view>
    </uni-nav-bar>

    <view
      class="page-body"
      :style="{
        height: `calc(100% - ${$sys().statusBarHeight}px - 88rpx)`
      }"
    >
      <scroll-view class="body-l" scroll-y>
        <view class="class-list">
          <view
            class="class-item"
            v-for="(item, i) in classList"
            :key="i"
            :class="{
              act: i === classCur
            }"
            @click="tapClass(i)"
          >
            {{ item.title }}
          </view>
        </view>
      </scroll-view>

      <view class="body-r" scroll-y>
        <mescroll-uni
          @init="mescrollInit"
          @down="downCallback"
          @up="getList"
          :down="downOption"
          :up="upOption"
          :fixed="false"
        >
          <view class="goods-list">
            <view
              class="goods-item"
              v-for="(item, i) in listData"
              :key="i"
              @click="toDetail(item)"
            >
              <view class="pic">
                <image :src="item.imgurl" lazy-load></image>
              </view>

              <view class="title hang1">
                {{ item.title }}
              </view>
            </view>
          </view>
        </mescroll-uni>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      optData: '',
      classList: [],
      classCur: '',
      // 下拉刷新的配置(可选, 绝大部分情况无需配置)
      downOption: {
        auto: false
      },
      // 上拉加载的配置(可选, 绝大部分情况无需配置)
      upOption: {
        auto: false,
        page: {
          size: 30 // 每页数据的数量,默认10
        }
      },
      listData: []
    }
  },

  computed: {
    goodsList() {
      return []
    }
  },

  onLoad(options) {
    this.optData = options
    this.getClass()
  },

  methods: {
    /**
     * 去详情
     */
    toDetail(item) {
      this.$c.to({
        url: '/package/mall/detail',
        query: {
          id: item.id
        }
      })
    },

    /**
     * 分类切换
     */
    tapClass(i) {
      this.classCur = i
      this.listData = []
      this.mescroll.resetUpScroll()
    },

    /**
     * @description: 获取列表
     * @param {*} num
     * @param {*} size
     * @return {*}
     */
    getList({ num, size }) {
      this.req({
        url: 'product_list',
        data: {
          page: num,
          cate_id: this.classList[this.classCur].id
        },
        Loading: true,
        success: res => {
          if (res.status == 1) {
            if (num == 1) {
              this.listData = []
            }

            this.listData = this.listData.concat(res.data.list)
            this.mescroll.endByPage(res.data.list.length, res.data.last_page)
          }
        }
      })
    },

    /**
     * 获取分类
     */
    getClass() {
      this.req({
        url: 'product_cate',
        data: {},
        success: res => {
          if (res.status == 1) {
            this.classList = res.data

            if (this.optData.id) {
              this.classCur = this.classList.findIndex(
                item => item.id == this.optData.id
              )
            }

            this.mescroll.resetUpScroll()
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.content {
  width: 100vw;
  height: 100vh;

  image {
    width: 100%;
    height: 100%;
    border-radius: inherit;
  }

  .icon {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .page-body {
    width: 100%;
    display: flex;

    .body-l {
      width: 200rpx;
      height: 100%;
      background: #111111;

      .class-list {
        width: 100%;

        .class-item {
          padding: 30rpx;
          display: flex;
          justify-content: center;
          align-items: center;

          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #cccccc;

          &.act {
            background: #e40d1d;
            color: #ffffff;
          }
        }
      }
    }

    .body-r {
      width: calc(100% - 200rpx);

      .goods-list {
        display: grid;
        grid-template-columns: repeat(3, 140rpx);
        padding: 30rpx;
        gap: 30rpx 34rpx;

        .goods-item {
          width: 100%;
          display: flex;
          flex-flow: column nowrap;
          align-items: center;

          .pic {
            width: 100%;
            height: 140rpx;
          }

          .title {
            padding: 20rpx 0 0;
            width: 100%;
            text-align: center;

            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #ffffff;
          }
          .hang1 {
          }
        }
      }
    }
  }
}
</style>
